<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- bootstrap -->
<link href="../../../plugin/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<!-- 构建图表 -->
<script src="../../../plugin/ECharts/dist/echarts.js"></script>
	<title>天气预报</title>
	<!-- 高德文档位置：https://lbs.amap.com/api/webservice/gettingstarted -->
	<!-- nowAPI提供的天气图标库，根据下载的压缩包分析图片：http://api.k780.com/upload/weather/n1/0.png -->
</head>
<body>
<!-- <div class="container"> -->
    <!-- 加载执行不需要触发 -->
    <!-- <button id="my_location" class="btn btn-success">天气预报</button> -->
<div class="panel panel-default">
	<div class="panel-heading panel-success">
		<h4 class="panel-title"><h3 id="city">CITY</h3></h4>
		<h4 id="province">PROVINCE</h4>
		<span id="adcode">ADCODE</span>
	</div>
	<div class="panel-body">
		
		<div class="row">
        <!-- 四天的天气 -->
        <div class="col-md-2 col-sm-3 col-xs-3">
            <div class="thumbnail">
                <img id="img_1" src="http://api.k780.com/upload/weather/d1/0.png">
                <div class="caption">
                    <h3><span id="dayweather_1">DAY</span>/<span id="nightweather_1">NIGHT</span></h3>
                    <p><span id="date_1">DATE</span>/ 周<span id="week_1">WEEK</span></p>
                    <p>气温：<span id="daytemp_1"></span>/ 夜晚：<span id="nighttemp_1"></span></p>
                    <p><span id="daywind_1"></span>风&nbsp;<span id="daypower_1"></span>&nbsp;级
                        / &nbsp;&nbsp;<span id="nightwind_1"></span>风&nbsp;<span id="nightpower_1"></span>&nbsp;级</p>
                    <!-- <p><a href="#" class="btn btn-success">快速进入</a></p> -->
                </div>                 
            </div>
        </div>
        <div class="col-md-2 col-sm-3 col-xs-3">
            <div class="thumbnail">
                <img id="img_2" src="http://api.k780.com/upload/weather/d1/0.png">  
                <div class="caption">
                    <h3><span id="dayweather_2">DAY</span>/<span id="nightweather_2">NIGHT</span></h3>
                    <p><span id="date_2">DATE</span>/ 周<span id="week_2">WEEK</span></p>
                    <p>气温：<span id="daytemp_2"></span>/ 夜晚：<span id="nighttemp_2"></span></p>
                    <p><span id="daywind_2"></span>风&nbsp;<span id="daypower_2"></span>&nbsp;级
                        / &nbsp;&nbsp;<span id="nightwind_2"></span>风&nbsp;<span id="nightpower_2"></span>&nbsp;级</p>
                    <!-- <p><a href="#" class="btn btn-success">快速进入</a></p> -->
                </div>          
            </div>
        </div>
        <div class="col-md-2 col-sm-3 col-xs-3">
            <div class="thumbnail">
                <img id="img_3" src="http://api.k780.com/upload/weather/d1/0.png">    
                <div class="caption">
                    <h3><span id="dayweather_3">DAY</span>/<span id="nightweather_3">NIGHT</span></h3>
                    <p><span id="date_3">DATE</span>/ 周<span id="week_3">WEEK</span></p>
                    <p>气温：<span id="daytemp_3"></span>/ 夜晚：<span id="nighttemp_3"></span></p>
                    <p><span id="daywind_3"></span>风&nbsp;<span id="daypower_3"></span>&nbsp;级
                        / &nbsp;&nbsp;<span id="nightwind_3"></span>风&nbsp;<span id="nightpower_3"></span>&nbsp;级</p>
                    <!-- <p><a href="#" class="btn btn-success">快速进入</a></p> -->
                </div>        
            </div>
        </div>
        <div class="col-md-2 col-sm-3 col-xs-3">
            <div class="thumbnail">
                <img id="img_4" src="http://api.k780.com/upload/weather/d1/0.png">    
                <div class="caption">
                    <h3><span id="dayweather_4">DAY</span>/<span id="nightweather_4">NIGHT</span></h3>
                    <p><span id="date_4">DATE</span>/ 周<span id="week_4">WEEK</span></p>
                    <p>气温：<span id="daytemp_4"></span>/ 夜晚：<span id="nighttemp_4"></span></p>
                    <p><span id="daywind_4"></span>风&nbsp;<span id="daypower_4"></span>&nbsp;级
                        / &nbsp;&nbsp;<span id="nightwind_4"></span>风&nbsp;<span id="nightpower_4"></span>&nbsp;级</p>
                    <!-- <p><a href="#" class="btn btn-success">快速进入</a></p> -->
                </div>        
            </div>
        </div>
    </div>



	</div>
	<div class="panel-footer"><h4 class="panel-title"><p>时间：<span id="reporttime">TIME</span></p></h4></div>
</div>
	<!-- 图表展示 -->
    <div id="main" style="width: 800px;height:500px;"></div>


<!-- </div> -->
<!-- Bootstrap -->
<script src="../../../plugin/js/bootstrap.min.js"></script>
<script type="text/javascript">

//000.加载执行
$(function(){
    //001.监听事件并通过IP定位
    $.ajax({
        // url: 'https://restapi.amap.com/v3/ip',   //高德
        url: 'https://api.map.baidu.com/location/ip',   //百度
        type: 'get',
        dataType: 'jsonp',
        data: {
            // key: 'cbb0938cf00887878777cba8947cacfd'  //高德
            ak: 'kIhQGVxyVnTZ6hMEsLSGCxyVH1ZddTGO'  //百度位置信息
        },
        success: function (data) {
            //返回结果举例：
            //{"status":"1",
            //"info":"OK",
            //"infocode":"10000",
            //"province":"辽宁省",
            //"city":"沈阳市",
            //"adcode":"210100",
            //"rectangle":"123.1270087,41.59337255;123.7459874,42.01728951"}
            // var res = JSON.stringify(data);  //返回结果对象转换json
            // sel_weather(data.adcode);   //查询天气，【高德】通过定位来的地区编码
            sel_weather(data.content.address_detail.city);  //百度位置
        },
        error: function (data){
            alert("抱歉，获取位置信息失败！");
            console.log("错误信息："+JSON.stringify(data));
        }
    }); 
    //002.触发接口实现查询
    function sel_weather(city_name){
        $.ajax({
            url: 'https://restapi.amap.com/v3/weather/weatherInfo',
            type: 'get',
            dataType: 'json',
            data: {     //可选：extensions： base【返回实况天气】 all【预报天气】
                key: 'cbb0938cf00887878777cba8947cacfd',
                city: city_name,
                extensions: 'all'  //查询全部天气
            },
            success: function (data) {
                //返回结果举例：
                //{"status":"1",
                //"count":"1",
                //"info":"OK",
                //"infocode":"10000",
                //"lives":[{"province":"辽宁",
                //          "city":"沈阳市",
                //          "adcode":"210100",
                //          "weather":"阴",
                //          "temperature":"25",
                //          "winddirection":"东北",
                //          "windpower":"6",
                //          "humidity":"71",
                //          "reporttime":"2018-08-23 13:00:00"}]}
                // var res = JSON.stringify(data);  //返回结果对象转换json
                // console.log(res);
                $('#city').text(data.forecasts[0].city);    //DOM操作
                $('#province').text(data.forecasts[0].province);
                $('#adcode').text(data.forecasts[0].adcode);
                $('#reporttime').text(data.forecasts[0].reporttime);
                var casts = data.forecasts[0].casts;    //取出天气数组
                var week_arr = ["一","二","三","四","五","六","日"];   //日期数组
                var myDate = new Date().getHours();
                var high_arr = [];	//高气温
                var low_arr = [];	//低气温
                var unit_arr = [];	//单位
                for(var i = 1;i <= casts.length;i ++){
                    if(myDate > 18 || myDate < 6){      //昼夜判断，如果时间大于18点或时间小于6点，则夜
                        $('#img_' + i).attr("src",weather_icon_n[casts[i - 1].nightweather]); //夜间天气
                    }else{
                        $('#img_' + i).attr("src",weather_icon_d[casts[i - 1].dayweather]);   //白天天气
                    }
                    $('#dayweather_' + i).text(casts[i - 1].dayweather);        //白天天气
                    $('#nightweather_' + i).text(casts[i - 1].nightweather);    //夜间天气
                    $('#date_' + i).text(casts[i - 1].date);                    //日期
                    var week_change = casts[i - 1].week;    //获取当前循环的周，数值类型
                    $('#week_' + i).text(week_arr[week_change - 1]);            //设置到周上
                    $('#daytemp_' + i).text(casts[i - 1].daytemp);              //日间气温
                    $('#nighttemp_' + i).text(casts[i - 1].nighttemp);          //夜间气温
                    $('#daywind_' + i).text(casts[i - 1].daywind);              //白天风向风力
                    $('#daypower_' + i).text(casts[i - 1].daypower);
                    $('#nightwind_' + i).text(casts[i - 1].nightwind);          //夜晚风向风力
                    $('#nightpower_' + i).text(casts[i - 1].nightpower);
                    high_arr[i - 1] = casts[i - 1].daytemp;	//高气温
                    low_arr[i - 1] = casts[i - 1].nighttemp;//低气温
                    unit_arr[i - 1] = week_arr[week_change - 1];//单位
                }
                draw_weather_line(high_arr,low_arr,unit_arr);
            },
            error: function (data){
                alert("抱歉，天气查询失败！");
                console.log("错误信息："+JSON.stringify(data));
            }
        });
    }
    //白天天气图标对象和url
    var weather_icon_d = {
        "晴": "http://api.k780.com/upload/weather/d1/0.png",
        "多云": "http://api.k780.com/upload/weather/d1/1.png",
        "阵雨": "http://api.k780.com/upload/weather/d1/3.png",
        "雷阵雨": "http://api.k780.com/upload/weather/d1/4.png",
        "阴": "http://api.k780.com/upload/weather/d1/2.png",
        "雨夹雪": "http://api.k780.com/upload/weather/d1/6.png",
        "小雨": "http://api.k780.com/upload/weather/d1/7.png",
        "中雨": "http://api.k780.com/upload/weather/d1/8.png",
        "大雨": "http://api.k780.com/upload/weather/d1/9.png",
        "大到暴雨": "http://api.k780.com/upload/weather/d1/10.png",
        "特大暴雨": "http://api.k780.com/upload/weather/d1/11.png",
        "阵雪": "http://api.k780.com/upload/weather/d1/13.png",
        "小雪": "http://api.k780.com/upload/weather/d1/14.png",
        "中雪": "http://api.k780.com/upload/weather/d1/15.png",
        "大雪": "http://api.k780.com/upload/weather/d1/16.png",
        "大到暴雪": "http://api.k780.com/upload/weather/d1/17.png",
        "龙卷风": "http://api.k780.com/upload/weather/d1/20.png",
        "扬沙": "http://api.k780.com/upload/weather/d1/29.png",
        "雾霾": "http://api.k780.com/upload/weather/d1/53.png"
    };
    //夜间天气图标和url
    var weather_icon_n = {
        "晴": "http://api.k780.com/upload/weather/n1/0.png",
        "多云": "http://api.k780.com/upload/weather/n1/1.png",
        "阵雨": "http://api.k780.com/upload/weather/n1/3.png",
        "雷阵雨": "http://api.k780.com/upload/weather/n1/4.png",
        "阴": "http://api.k780.com/upload/weather/n1/2.png",
        "雨夹雪": "http://api.k780.com/upload/weather/n1/6.png",
        "小雨": "http://api.k780.com/upload/weather/n1/7.png",
        "中雨": "http://api.k780.com/upload/weather/n1/8.png",
        "大雨": "http://api.k780.com/upload/weather/n1/9.png",
        "大到暴雨": "http://api.k780.com/upload/weather/n1/10.png",
        "特大暴雨": "http://api.k780.com/upload/weather/n1/11.png",
        "阵雪": "http://api.k780.com/upload/weather/n1/13.png",
        "小雪": "http://api.k780.com/upload/weather/n1/14.png",
        "中雪": "http://api.k780.com/upload/weather/n1/15.png",
        "大雪": "http://api.k780.com/upload/weather/n1/16.png",
        "大到暴雪": "http://api.k780.com/upload/weather/n1/17.png",
        "龙卷风": "http://api.k780.com/upload/weather/n1/20.png",
        "扬沙": "http://api.k780.com/upload/weather/n1/29.png",
        "雾霾": "http://api.k780.com/upload/weather/n1/53.png"
    };
    //画统计图表，传入高温低温和日期单位
    function draw_weather_line(high_arr,low_arr,unit_arr){
    	//构建图表
    	var myChart = echarts.init(document.getElementById('main'),'dark');
    	option = {
    		title: {		//图表标题
    	        text: '未来几天气温变化图'
    	    },
    	    tooltip: {		//悬浮X轴提示
        		trigger: 'axis'
    		},
    		legend: {		//切换线条显示
        		data:['高气温','低气温']
    		},
    		xAxis: {
    			name: '星期',
    		    type: 'category',
    		    data: unit_arr
    		},
    		yAxis: {
    			name: '摄氏度',
    		    type: 'value'
    		},
    		series: [{	
    			name: '高气温',
    		    data: high_arr,
    		    type: 'line',
    		    smooth: true
    		},{
    			name: '低气温',
    		    data: low_arr,
    		    type: 'line',
    		    smooth: true
    		}]
		};
		myChart.setOption(option);
	}
});


</script>
</body>
</html>